/**
 * Created by FreezeSoul on 2018/10/16.
 */
define(
    ["app/core/base",
        "app/core/util",
        "../echartsMeta",
        "jquery",
        "underscore",
        'JSONParse',
        'loglevel',
        "echarts"
    ],
    function (Chart, Util, Meta, $, _, JSON, log, ec) {

        var property = {
            name: '通用属性',
            config: "property",
            option: []
                .concat($.extend(true, [], Meta.titleProperties))
                .concat($.extend(true, [], Meta.legendProperties))
                .concat($.extend(true, [], Meta.tooltipProperties))
                .concat($.extend(true, [], Meta.toolboxProperties))
                .concat([
                    {
                        group: '绑定',
                        id: 'processBinding',
                        name: '进度绑定',
                        enable: true,
                        type: 'sortBinding',
                        dataset: '',
                        columns: [],
                        tooltip: '进度值绑定，要求有两个度量列，依次为当前数、总数'
                    }
                ]).concat($.extend(true, [], Meta.otherProperties)),
            MapOption: function (option) {
                Util.linkOption(this.option, option);
            }
        };
        //http://gallery.echartsjs.com/editor.html?c=xrkaZofj7f

        var pie = Chart.extend({
                constructor: function (layout) {
                    this._layout = layout;
                    this._container = null;
                    this._chart = null;
                    this._option = {
                        Binding: [],
                        Events: [],
                        Extend: $.extend(true, {}, property),
                        Option: {
                            backgroundColor:'#0e2147',
                            grid: {
                                left: '11%',
                                top:'12%',
                                right: "8%",
                                bottom: "5%",
                                containLabel: true
                            },
                            xAxis: [{
                                show: false,
                            }],
                            yAxis: [{
                                axisTick:'none',
                                axisLine:'none',
                                offset:'27',
                                axisLabel: {
                                    textStyle: {
                                        color: '#ffffff',
                                        fontSize:'16',
                                    }
                                },
                                data: []
                            }, {
                                axisTick:'none',
                                axisLine:'none',
                                axisLabel: {
                                    textStyle: {
                                        color: '#ffffff',
                                        fontSize:'16',
                                    }
                                },
                                data: [3000]
                            },{

                                axisLine:{
                                    lineStyle:{
                                        color:'rgba(0,0,0,0)'
                                    }
                                },
                                data: [],
                            }],
                            series: [{
                                name: '条',
                                type: 'bar',
                                stack:'圆',
                                yAxisIndex: 0,
                                data: [50],
                                label:{
                                    normal:{
                                        show:true,
                                        position:'right',
                                        distance:10,
                                        formatter:function(param){
                                            return param.value + '%';
                                        },
                                        textStyle:{
                                            color: '#ffffff',
                                            fontSize:'16',
                                        }
                                    }
                                },
                                barWidth: 10,
                                itemStyle: {
                                    normal: {
                                        color: '#0096f3',
                                    }
                                },
                                z: 2
                            },{
                                name: '内圆',
                                type: 'scatter',
                                stack:'圆',
                                data: [0],
                                label:{
                                    normal:{
                                        show:false,
                                    }
                                },

                                yAxisIndex: 2,
                                symbolSize: 14,
                                itemStyle: {
                                    normal: {
                                        borderColor: '#fff',
                                        borderWidth:3 ,
                                        color:'#0096f3',
                                        opacity: 1,
                                    }
                                },
                                z: 2
                            }, {
                                name: '白框',
                                type: 'bar',
                                yAxisIndex: 1,
                                barGap: '-100%',
                                data: [99.5],
                                barWidth: 20,
                                itemStyle: {
                                    normal: {
                                        color: '#0e2147',
                                        barBorderRadius: 5,
                                    }
                                },
                                z: 1
                            }, {
                                name: '外框',
                                type: 'bar',
                                yAxisIndex: 2,
                                barGap: '-100%',
                                data: [100],
                                barWidth: 24,
                                itemStyle: {
                                    normal: {
                                        color: '#0096f3',
                                        barBorderRadius: 5,
                                    }
                                },
                                z: 0
                            },
                                {
                                    name: '外圆',
                                    type: 'scatter',
                                    hoverAnimation: false,
                                    data: [0],
                                    yAxisIndex: 2,
                                    symbolSize: 30,
                                    itemStyle: {
                                        normal: {
                                            color: '#0096f3',
                                            opacity: 1,
                                        }
                                    },
                                    z: 2
                                }]
                        }
                    };
                },
                init: function (element) {
                    try {
                        this._container = element;
                        this._chart = ec.init(element, null, {
                            renderer: 'canvas'
                        });
                        //this._bindEvent();
                    } catch (e) {
                        log.error(e);
                    }
                },
                example: function () {
                    try {
                        this._chart.setOption(this._option.Option, true);
                    } catch (e) {
                        log.error(e);
                    }
                },
                _readProperty: function () {
                    try {
                        if (!this._option.Extend) return;
                        Util.deepMapOption(property, this._option.Extend, this._option.Option);
                    } catch (e) {
                        log.error(e);
                    }
                },
                _bindData: function (data) {
                    var bindProperty = _.findWhere(this._option.Extend.option, {id: 'processBinding'});
                    if (!bindProperty || !bindProperty.enable) return;


                    var dataSetCode = bindProperty.dataset;
                    var columns = bindProperty.columns;
                    if (columns.length !== 2) return;

                    var table = data[dataSetCode];
                    if (table && table.length > 0) {
                        var totalNum = table[0][1];
                        var currentNum = table[0][0];
                        var processNum = parseInt(currentNum/totalNum * 100);
                        this._option.Option.yAxis[1].data = [totalNum];
                        this._option.Option.series[0].data = [processNum];
                    }
                },

                setData: function (data) {
                    try {
                        this._readProperty();
                        if (data
                            && this._option.Binding
                            && this._option.Binding.length > 0
                            && this._option.Extend) {

                            this._bindData(data);

                            this._readProperty();
                        }
                        this._chart.setOption(this._option.Option, true);

                        //Util.setEChartsMeta(this, this._container, this._option.Extend.option);
                    } catch (e) {
                        log.error(e);
                    }
                }

                ,
                setOption: function (option) {
                    try {
                        return this._option = $.extend(true, {}, option);
                    } catch (e) {
                        log.error(e);
                    }
                }
                ,
                getOption: function () {
                    try {
                        this._readProperty();
                    } catch (e) {
                        log.error(e);
                    }
                    return this._option;
                }
                ,
                setTheme: function (theme) {
                    try {
                        this._chart.setTheme(theme);
                    } catch (e) {
                        log.error(e);
                    }
                }
                ,
                resize: function () {
                    try {
                        this._chart.resize();
                    } catch (e) {
                        log.error(e);
                    }
                }
                ,
                showLoading: function () {
                    try {
                        if (this._layout && this._layout.showLoading) {
                            this._layout.showLoading(this);
                        }
                    } catch (e) {
                        log.error(e);
                    }
                }
                ,
                hideLoading: function () {
                    try {
                        if (this._layout && this._layout.hideLoading) {
                            this._layout.hideLoading(this);
                        }
                    } catch (e) {
                        log.error(e);
                    }
                }
                ,
                dispose: function () {
                    try {
                        this._chart.dispose();
                    } catch (e) {
                        log.error(e);
                    }
                }
                , getElement: function () {
                    return this._container;
                },
                getChart: function () {
                    return this._chart;
                }
            })
        ;

        return {
            Chart: pie,
            Property: property
        };
    })
;
